<template>
  <view class="container">
    <view class="tool" v-if="list1.length">
      <view class="tlt c1 fs32 fw600">
        <view class="tlt-border"></view>
        <view>运营管理</view>
      </view>
      <view class="tools">
        <template v-for="item in list1" :key="item.permission">
          <view class="tool-item" v-if="item.group == 1" @click="nav(item)">
            <image :src="item.image" mode="widthFix" />
            <span class="c1 fs26 fw500" :class="{ fs24: item.name == '库存同步记录' || item.name == '合同签署记录' }">{{ item.name }}</span>
            <view v-if="item.tagName" class="tool-tag">{{ item.tagName }}</view>
          </view>
        </template>
      </view>
    </view>
    <view class="tool" v-if="list2.length">
      <view class="tlt c1 fs32 fw600">
        <view class="tlt-border"></view>
        <view>车辆运维</view>
      </view>
      <view class="tools">
        <template v-for="item in list2" :key="item.permission">
          <view class="tool-item" v-if="item.group == 2" @click="nav(item)">
            <image :src="item.image" mode="widthFix" />
            <span class="c1 fs26 fw500" :class="{ fs24: item.name == '车载BOX使用' }">{{ item.name }}</span>
            <view v-if="item.tagName" class="tool-tag">{{ item.tagName }}</view>
          </view>
        </template>
      </view>
    </view>
    <!-- 空占位 -->
    <ve-empty v-if="list1.length == 0 && list2.length == 0" type="auth" text="暂无权限"></ve-empty>
    <!-- 跳转小程序 -->
    <ToBgmWxapp />
    <!-- 新增保险 弹窗 -->
    <ve-popup :model-value="insurePopupVisible" @close="insurePopupClose" mode="bottom" :maskClose="true">
      <view class="add-popup">
        <view class="title c1 fs36">请选择新增的投保类型</view>
        <ve-button class="button" size="default" @click="addInsure(0)">交强险</ve-button>
        <ve-button class="button" size="default" @click="addInsure(1)">商业险</ve-button>
      </view>
    </ve-popup>
  </view>
</template>
<script setup lang="ts">
  import { ref, onMounted } from 'vue'
  import { userStore } from '@/stores'
  import { appConfig } from '@/config/index.js'
  import { listJS } from '@/pages/index/menu.js'
  import ToBgmWxapp from '@/components/to-bgm-wxapp.vue'

  const userInfoStore = userStore()
  const list1 = ref<any[]>([])
  const list2 = ref<any[]>([])

  const getMenusList = async () => {
    const permissions = userInfoStore.permissons
    listJS.forEach((it) => {
      if (appConfig.asyncRoutes == false) {
        if (it.group == 1) {
          list1.value.push(it)
        } else {
          list2.value.push(it)
        }
        return
      }
      if (permissions.includes(it.permission)) {
        if (it.group == 1) {
          list1.value.push(it)
        } else {
          list2.value.push(it)
        }
      }
    })
  }

  // 保险悬浮框显隐
  const insurePopupVisible = ref(false)
  const nav = (item: any) => {
    if (item.nav == 'navigateTo') {
      uni.navigateTo({ url: item.url })
    }
    // 新增保险
    if (item.name == '新增保险') {
      insurePopupVisible.value = true
    }
  }
  // 保险悬浮框关闭
  const insurePopupClose = () => {
    insurePopupVisible.value = false
  }
  // 添加保险
  const addInsure = (insureKind: number) => {
    insurePopupVisible.value = false
    uni.navigateTo({
      url: '/pages/asset/car-insure/form?from=indexTool&insureKind=' + insureKind,
    })
  }
  onMounted(() => {
    getMenusList()
  })
</script>

<style lang="scss" scoped>
  .container {
    border-top: 2rpx solid #f7f8fa;
    min-height: 100%;
    height: auto;
  }

  .tool {
    margin-bottom: 20rpx;
    background: #f7f8fa;
  }
  .tlt {
    padding: 32rpx;
    background: #f7f8fa;
    display: flex;
    align-items: center;
  }
  .tlt-border {
    width: 6rpx;
    height: 30rpx;
    background: #407fff;
    margin-right: 12rpx;
  }
  .tools {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    background: #f7f8fa;
    flex-wrap: wrap;
    padding: 0 24rpx;
    .tool-item {
      position: relative;
      width: calc((100% - 60rpx) / 4);
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      padding: 24rpx 0;
      background: #ffffff;
      margin: 0 20rpx 24rpx 0;
      box-shadow: 0 4rpx 14rpx 0 rgba(128, 128, 128, 0.05);
      border-radius: 8rpx;
      &:nth-of-type(4n) {
        margin-right: 0;
      }
      image {
        width: 96rpx;
        height: 96rpx;
        margin-bottom: 8rpx;
      }
      .tool-tag {
        position: absolute;
        top: 0;
        right: 0;
        width: 68rpx;
        height: 40rpx;
        line-height: 40rpx;
        text-align: center;
        color: #ffffff;
        font-size: 24rpx;
        border-radius: 0 8rpx 0 8rpx;
        background: linear-gradient(270deg, #ff554c 0%, #ffcb21 100%);
      }
      .fs24 {
        font-size: 24rpx;
      }
    }
  }
  .add-popup {
    padding: 0 40rpx 64rpx;
    .title {
      margin: 48rpx 0;
      width: 100%;
      text-align: center;
    }
    .button {
      margin-bottom: 32rpx;
    }
  }
</style>
